上一篇提到 Nebular 的其中一個缺點就是 沒有格線系統 ，需要另外安裝套件或是自行設計。

這是一個缺點，但並非致命的缺點，不可克服或解決。

以下是兩個解決辦法

• 自行設計
• 另外安裝套件

自行設計的優缺點顯而易見，優點就是自己的設計而已為專案量身打造，不多不少完全符合需求。缺點就是要額外花時間，時間長短依照經驗和功力不一定。但是另外安裝套件的話，像是bootstrap的話，就有現成的解決方案，也不必花時間再重複造輪子

我需要bootstrap的什麼?

我需要bootstrap的格線系統以及對應不同裝置尺寸的排版，因為要做自適應

我不需要bootstrap的什麼?

bootstrap有一套自己的設計系統，設計了很多常用的元件，像是卡片、彈窗等等，但是這些都是我不需要的，因為我選擇了和Angular整合的Nebular，可以讓我開發更快，同時我覺得更加美觀，更符合我想要的設計

使用bootstrap的優點

使用bootstarp的優點明顯且可見，就是只要安裝完畢之後，就可以馬上使用了，整個過程不用十分鐘，就可以快速使用bootstrap所提供方便的格線系統了

使用bootstrap的缺點

缺點同樣明顯可見，也就是我並不需要bootstrap一整套解決方案，我只需要其中一小部分的格線系統，但是我卻引用了bootstrap所有一整包的檔案。

就等於引用了一大部分自己根本不會用到的東西，卻又沒有辦法剔除。會讓整個前端專案打包的大小變大不少。

使用套件的抉擇

分析了使用bootstrap的優缺點，和個人需要什麼不需要什麼之後。最後我的抉擇是 - 安裝bootstrap，原因就是懶，不想要在自己花時間重複造輪子在基礎建構上，因此直接套用現成的解決方案。雖然會加大專案的大小，不過就是先求有再求好，等穩定了之後，可以在決定要不要自己做一套比較輕量的格線系統。

但是要注意的是，再一次強調， 因為這是「自己的」sideproject，所以對自己的事情有絕對的衡量與裁量的權力。如果是公司的專案或正式的案子，選擇bootstrap，為了求快求方便加入了只要其中一小部分功能的框架，這個應該不太會被接受。取其平衡的做法是，將bootstrap中，關於格線系統的程式碼自己做一份弄到專案當中，取其精華去其糟粕，這會是比較好的做法。

安裝bootstrap

npm install bootstrap --save-dev

安裝完之後，打開 angular.json 加入 bootstrap 的佈景主題檔案

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "apps/hello-angular/src/styles.scss"
            ],

bootstrap的替代方案

<nb-layout>
  <nb-layout-header fixed> hello-angular </nb-layout-header>

  <nb-layout-column>
    <!-- 加入 bootstarp 樣式 -->
    <div class="container">
      <div class="row">
        <div class="col">區塊 1/3</div>
        <div class="col">區塊 2/3</div>
        <div class="col">區塊 3/3</div>
      </div>
    </div>
  </nb-layout-column>

  <nb-layout-footer fixed> </nb-layout-footer>
</nb-layout>

打開頁面看一下，看一下成果

成功安裝 bootstrap，接下來就開始設計網站的門面首頁吧！